<template>
	<view style="position: relative;">
		<u-navbar :is-back="true" title="推荐问答"></u-navbar>
		<!-- 		<view class="yc-btn" @click="hidefun" :style="[{'left':hideleft?'650rpx':'160rpx'}]">
			<u-icon name="arrow-left-double" v-if="!hideleft"></u-icon>
			<u-icon name="arrow-right-double" v-if="hideleft"></u-icon>
		</view> -->
		<fixedTool :data="btnlist" :isIcon="isIcon" :scrollTop="scrollTop" @tapBar="tapToolsBar" :show="toolshow">

		</fixedTool>
		<view class="VerticalBox">

			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
				:style="[{'height':viewitwm}]" v-if="!hideleft">
				<view class="cu-item" :class="index==tabCur?'text-black cur':'text-gray'" v-for="(item,index) in inList"
					:key="index" @tap="TabSelect" :data-id="index">
					<image :src="item.industryIcon" class="logo"></image>
					<view style="overflow: hidden; font-size: 22rpx;">{{item.industryName}}</view>
				</view>
			</scroll-view>
			<!-- @scroll="VerticalMain" -->
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation :style="[{'height':viewitwm}]"
				@scrolltolower="getMore()">
				<block v-if="inList.length>0 ">
					<view v-if=" inList[tabCur] && inList[tabCur].questions" class=""
						v-for="(item,index1) in inList[tabCur].questions" :key="index1" id="'main-'+index1">
						<!-- <block v-for="(item,index) in item1.questions"> -->
						<view class="cu-list">
							<view class="cu-item" v-for="(obj,findex) in item" @click="detail(obj,findex)">
								<view class="qes flex">
									<image src="../../static/img/sign-question.png" mode="widthFix"
										style="width: 31rpx;">
									</image>
									<view class="tiwen">
										{{obj.content}}
									</view>
								</view>
								<view class="ans text-gray flex">
									<image src="../../static/img/sign-answer.png" mode="widthFix"
										style="width: 31rpx;top: 0;"></image>
									<view style="width:calc(100% - 62rpx);color: #000;position: relative;">
										<view class="wenben">{{obj.detail.content}}</view>
										<view class="zhezhao" v-if="obj.detail">查看详情</view>
									</view>

								</view>
								<view class="fuhao u-flex u-row-between">
									<view class="">{{getTimeFormat(obj.createTim)}}</view>
									<view>
										<u-icon name="chat" color="#999999" size="30"></u-icon>
										<text class="number">{{obj.detailNum}}</text>
										<u-icon name="heart" color="#999999" size="30" style="margin-left: 10rpx;"
											v-if="!obj.mydz" @click="like(obj,1)"></u-icon>
										<u-icon name="heart-fill" color="#e30000" size="30" style="margin-left: 10rpx;"
											v-if="obj.mydz" @click="like1(obj,1)"></u-icon>
										<text class="number number1">{{obj.dianzan?obj.dianzan:0}}</text>
										<u-icon name="eye" color="#2979ff" size="32" style="margin-left: 10rpx;">
										</u-icon>
										<text
											style="margin-left: 5rpx;font-size: 28rpx;">{{obj.chakannum?obj.chakannum:0}}</text>
									</view>
									<!-- <view>
										<text class="cuIcon-attention text-grey"></text>
										<text class="margin-right">{{item.eye}}</text>
										<text class="cuIcon-attention text-grey"></text>
										<text class="margin-right">{{item.like}}</text>
										<text class="cuIcon-attention text-grey"></text>
										<text>{{item.comment}}</text>
									</view> -->
								</view>
							</view>
						</view>
						<!-- </block> -->

					</view>

				</block>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		http,
		Method
	} from "@/utils/request.js";
	import moment from 'dayjs';
	import storage from "@/utils/storage.js";
	import fixedTool from '@/components/fixed-tools.vue';
	export default {
		components: {
			fixedTool: fixedTool,
		},
		data() {
			return {
				toolshow: false,
				showpop: false,
				btnlist: [{
					icon: 'arrow-left-double',
					num: 0
				}, {
					icon: 'search',
					num: 0
				}],
				isIcon: {
					down: 'close',
					top: 'list-dot',
					up: 'list-dot'
				},
				scrollTop: 0,
				hideleft: false,
				pageSize: 20,
				viewitwm: 0,
				inList: [],
				list: [{
						id: 0,
						name: "全部",
						arr: [{
								"id": 1,
								"qes": "我们单位买了一辆车，原价值26万，已计提折旧14万，卖价为4万，公司要求要做转账...",
								"ans": "1.固定资产转入清理：借：累计折旧 固定资产减值准备（如计提）固定资产清理贷：固定资产原值报..."
							},
							{
								"id": 2,
								"qes": "我们单位买了一辆车，原价值26万，已计提折旧14万，卖价为4万，公司要求要做转账...",
								"ans": "1.固定资产转入清理：借：累计折旧 固定资产减值准备（如计提）固定资产清理贷：固定资产原值报..."
							},
						],
						time: "20小时前发布",
						eye: 10,
						like: 200,
						comment: 21,
					},
					{
						id: 1,
						name: "建筑施工"
					},
					{
						id: 2,
						name: "房地产开发"
					},
					{
						id: 3,
						name: "商贸"
					},
					{
						id: 4,
						name: "科技"
					},
					{
						id: 5,
						name: "网络直播"
					},
					{
						id: 6,
						name: "医美"
					},
				],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				title: "推荐问答",
				isAdmin: false,
			};
		},
		onLoad(option) {

			let systemInfo = uni.getSystemInfoSync();
			console.log("**********onLoad***************", systemInfo)
			let statusBarHeight = systemInfo.screenHeight - (systemInfo.statusBarHeight + uni.upx2px(88));
			this.viewitwm = statusBarHeight + "px";
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			if (option.isAdmin) {
				this.isAdmin = option.isAdmin
			}

		},
		onShow() {
			let isccccc = uni.getStorageSync("isccccc");
			if (!isccccc) {
				this.getAllLiIndustry();
			}

		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			tapToolsBar(item, index) {
				if (index == 0) {
					this.hideleft = !this.hideleft
				} else if (index == 1) {
					uni.navigateTo({
						url: "/pages/mine/navigation/search/searchPage"
					})
				}
			},
			hidefun() {
				this.hideleft = !this.hideleft
			},
			getMore() {
				if (!this.inList || this.inList.length == 0) {
					return;
				}
				let page = this.inList[this.tabCur]["pageNumber"] || 1
				if (this.inList[this.tabCur]["questions"]) {

					page++;

				}
				if (page * this.pageSize >= this.inList[this.tabCur]["total"]) {
					uni.showToast({
						icon: "none",
						title: "没有更多了~"
					})
					return
				}
				this.inList[this.tabCur]["pageNumber"] = page;
				this.dataList();
			},
			getTimeFormat(timeLong) {

				let now = moment()
				let time = moment(timeLong);
				let minute = now.diff(time, "minute");
				let hour = now.diff(time, "hour");
				let day = now.diff(time, "day");
				// if(day==0 && hour==0 && minute<=60){
				// 	return minute+"分钟前"
				// }
				// if(day==0 && hour<=24){
				// 	return hour+"小时"+minute+"分钟前";
				// }
				// if(day<=30){
				// 	return day+"天"+hour+"小时"+minute+"分钟前"
				// }
				return time.format("YYYY-MM-DD HH:mm");
			},
			async dataList() {
				let user = storage.getUserInfo();
				let pageNumber = this.inList[this.tabCur]["pageNumber"] || 1
				let params = {
					pageNumber: pageNumber,
					pageSize: this.pageSize,
					deleteFlag: false,
					sort: "create_time",
					order: "desc",

				}
				if (this.tabCur > 0) {
					params["industryId"] = Number(this.inList[this.tabCur].id)
				}
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let res = await http.request({
					url: "/lili/liQuestions",
					method: Method.GET,
					needToken: true,
					params,
				});
				let data = res.data.result.records || [];
				this.inList[this.tabCur]["total"] = res.data.result.total;
				let index = pageNumber - 1;
				this.inList[this.tabCur]["pageNumber"] = pageNumber;
				if (!this.inList[this.tabCur]["questions"]) {
					this.inList[this.tabCur]["questions"] = [];
				}
				this.inList[this.tabCur]["questions"][index] = data;
				this.$forceUpdate()
				uni.hideLoading()
				console.log("showHangyeList", this.questions)
			},

			async getAllLiIndustry() {
				let user = storage.getUserInfo();
				let params = {
					pageNumber: 1,
					pageSize: 999,
					deleteFlag: false,
					sort: "create_time",
					order: "desc",
					isAdmin: this.isAdmin
				}
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let res = await http.request({
					url: "/lili/liQuestions/getAllLiIndustry",
					method: Method.GET,
					needToken: true,
					params,
				});
				uni.hideLoading()
				let data = res.data.result.records || [];
				let inList = []
				let obj = {
					"industryName": "全部",
					"isselect": true,
					"id": null,
				}
				inList.push(obj)
				data.forEach(item => {
					item["isselect"] = false;
					inList.push(item)
				});
				this.inList = [...inList];
				this.dataList()
			},

			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				// this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 70;
				this.dataList();
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return false //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						// this.verticalNavTop = (this.list[i].id - 1) * 70
						this.tabCur = this.list[i].id
						return false
					}
				}
			},
			detail(obj, index) {
				uni.navigateTo({
					url: "/pages/verticalnav/question-detail?id=" + obj.id,
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	
	.tiwen{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		width: calc(100% - 32rpx);
		font-weight: bolder;
	}
	.wenben{
		// display: -webkit-box;
		// -webkit-line-clamp: 2; // 超出多少行
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		color: #6b6b6b;
	}
	
	.zhezhao {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .99));
		backdrop-filter: blur(150rpx);
		bottom: 0;
		position: absolute;
		z-index: 9999;
		line-height: 80rpx;
		text-align: center;
		color: #3f426d;
		display: none;
	}
	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
		background-color: #F1F2F3;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;

		margin: 0;
		border: none;
		height: 164rpx;
		position: relative;
		// padding-bottom: 20rpx;

		.logo {
			width: 40rpx;
			height: 40rpx;
			margin-top: 20rpx;
		}
	}

	/deep/.nav .cu-item {
		line-height: 30rpx;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #ffffff;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 100%;
		position: absolute;
		background-color: #FF9240;
		top: 0;
		left: 0upx;
		bottom: 0;

	}

	.VerticalBox {
		display: flex;
		position: relative;
	}

	.VerticalMain {
		background-color: #ffffff;
		flex: 1;
		padding: 0 30rpx;

		.cu-list {
			color: #666666;
			font-size: 26rpx;
			line-height: 30rpx;

			.cu-item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #DBDDE0;

				image {
					width: 70rpx;
					height: 32rpx;
					position: relative;
					top: 8rpx;
					margin-right: 15rpx;
				}

				.qes {
					font-size: 28rpx;
					font-weight: 550;

					line-height: 50rpx;
				}

				.ans {
					max-height: 120rpx;
					// margin-bottom: 100rpx;
					overflow: hidden;
					margin: 20rpx 0;
				}

				.fuhao {
					margin-left: 42rpx;
					color: #999999;

					.margin-right {
						margin: 0 20rpx 0 10rpx;
					}
				}
			}
		}
	}


	.text-gray {
		color: #888888;
	}

	.yc-btn {
		position: absolute;
		right: 100rpx;
		bottom: 100rpx;
		z-index: 9999;
		background: rgba(255, 255, 255, .8);
		backdrop-filter: blur(30rpx);
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		line-height: 80rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, .6);
		text-align: center;
	}
</style>
